<script setup>
import { onMounted, ref } from "vue";
import SearchForm from "./components/SearchForm.vue";
import AddForm from "./components/AddForm.vue";
import TableList from "@/components/TableList/index.vue";
import PaginationBox from "@/components/PaginationBox/index.vue";
import { getCommunityList, delCommunityApi } from "@/api/community";
import { ElMessage } from "element-plus";

// 搜索表单区域
const defaultData = () => ({
  current: 1,
  pageSize: 10,
  name: "",
  developer: "",
  estate: "",
  create_time: "",
});

const queryData = ref(defaultData());
// 搜索更新列表
const updateList = () => {
  queryData.value.current = 1;
  initData();
};

// 重置列表
const resetList = () => {
  queryData.value = defaultData();
  initData();
};

// 列表功能
const list = ref([]);
const total = ref(0);

const initData = async () => {
  const { data } = await getCommunityList(queryData.value);
  console.log(data);
  list.value = data.rows;
  total.value = data.count;
};

const columns = [
  {
    label: "缩略图",
    prop: "thumb",
    type: "picture",
  },
  {
    label: "小区名称",
    prop: "name",
  },
  {
    label: "坐落地址",
    prop: "address",
  },
  {
    label: "占地面积",
    prop: "area",
  },
  {
    label: "总栋数",
    prop: "total_building",
  },
  {
    label: "绿化率",
    prop: "greening_rate",
  },
  {
    label: "开发商名称",
    prop: "developer",
  },
  {
    label: "物业公司名称",
    prop: "estate",
  },
  {
    label: "创建时间",
    prop: "create_time",
    type: "time",
  },
  {
    label: "操作",
    type: "action",
  },
];

onMounted(() => {
  initData();
});

// 新增修改
const addRef = ref();
// 删除
const delRow = async (id) => {
  console.log(id);
  await delCommunityApi(id);
  ElMessage.success("删除成功");
  if (queryData.value.current > 1 && list.value.length <= 1) {
    queryData.value.current--;
  }
  initData();
};

defineExpose({
  queryData,
});
</script>

<template>
  <div class="app-container">
    <h1>小区管理</h1>
    <!-- 搜索表单 -->
    <el-card>
      <SearchForm
        :queryData="queryData"
        @updateList="updateList"
        @resetList="resetList"
      ></SearchForm>
    </el-card>
    <br />
    <!-- 主体部分 -->
    <el-card>
      <!-- 工具栏 -->
      <el-row justify="end">
        <div></div>
        <div>
          <!-- -->
          <el-button type="primary" @click="addRef.isShow = true"
            >新增小区</el-button
          >
        </div>
      </el-row>
      <br />
      <!-- 表格 -->
      <TableList
        :list="list"
        :columns="columns"
        @handleEdit="addRef.replyData($event)"
        @handleDel="delRow($event)"
      ></TableList>
      <br />
      <!-- 分页 -->
      <PaginationBox
        :queryData="queryData"
        :total="total"
        @changePageNum="initData"
        @changePageSize="initData"
      ></PaginationBox>
    </el-card>
    <!-- 新增修改抽屉 -->
    <AddForm ref="addRef" @updateList="initData"></AddForm>
  </div>
</template>

<style scoped></style>
